window.addEventListener("load", function () {
    // 获取焦点图对象
    let focus = document.querySelector(".focus");
    // 获取焦点图对象中的ul
    let ul = focus.children[0];
    // 获取小圆点列表ol
    let ol = focus.children[1];
    // 焦点图的宽度
    let focusWidth = focus.offsetWidth;
    // 用来跟踪轮播图的索引号
    let index = 0;
    // 水平方向移动的距离
    let moveX = 0;

    let timer = this.setInterval(function () {
        // 每过两秒，让焦点图的索引号自增1
        index++;
        // 然后索引号乘以图片宽度，获得下一个移动的坐标
        moveX = -index * focusWidth;
        // 为轮播图添加过度效果
        ul.style.transition = "all .5s";
        // 再将ul移动到对应的坐标
        ul.style.transform = "translateX(" + moveX + "px)";
    }, 2000);

    ul.addEventListener("transitionend", function () {
        if (index >= 3) {
            // 当图片移动到最后一张时，跳转回第一张
            index = 0;
            // 由于要立即跳转，所以要将过度清除
            ul.style.transition = "none";
            // 跳转完成之后，要重新添加过度
            moveX = -index * focusWidth;
            ul.style.transform = "translateX(" + moveX + "px)";
        } else if (index < 0) {
            // 当图片索引号为负数时，跳转回第三张
            index = 2;
            // 由于要立即跳转，所以要将过度清除
            ul.style.transition = "none";
            // 跳转完成之后，要重新添加过度
            moveX = -index * focusWidth;
            ul.style.transform = "translateX(" + moveX + "px)";
        }

        // 将小圆点列表中带有 current 类的元素的 current 类删除
        ol.querySelector(".current").classList.remove("current");
        // 为当前元素添加 current 
        ol.children[index].classList.add("current");

        // 手指拖动效果
        // 获取初始x坐标
        let startX = 0;
        let mousedMoveX = 0;
        let flag = false;

        ul.addEventListener("touchstart", function (e) {
            startX = e.targetTouches[0].pageX;
            clearInterval(timer);
        });

        ul.addEventListener("touchmove", function (e) {
            mousedMoveX = e.targetTouches[0].pageX - startX;
            let transitionX = -index * focusWidth + mousedMoveX;
            ul.style.transition = "none";
            ul.style.transform = "translateX(" + transitionX + "px)";
            flag = true;
            e.preventDefault();
        });

        ul.addEventListener("touchend", function (e) {
            if (flag === true) {
                if (50 < Math.abs(mousedMoveX)) {
                    // 如果是右滑就是 播放上一张 mousedMoveX为正
                    if (mousedMoveX > 0) {
                        index--;
                    } else {
                        index++;
                    }
                    // 如果是左滑就是 播放下一张 mousedMoveX为负

                    let transitionX = -index * focusWidth;
                    ul.style.transition = "all .5s";
                    ul.style.transform = "translateX(" + transitionX + "px)";
                } else {
                    let transitionX = -index * focusWidth;
                    ul.style.transition = "all .1s";
                    ul.style.transform = "translateX(" + transitionX + "px)";
                }
            }

            // 重新开启定时器
            timer = setInterval(function () {
                // 每过两秒，让焦点图的索引号自增1
                index++;
                // 然后索引号乘以图片宽度，获得下一个移动的坐标
                moveX = -index * focusWidth;
                // 为轮播图添加过度效果
                ul.style.transition = "all .5s";
                // 再将ul移动到对应的坐标
                ul.style.transform = "translateX(" + moveX + "px)";
            }, 2000);
        });
    });


    // 返回顶部模块
    let goBack = document.querySelector(".goBack");
    let navCommon = document.querySelector(".nav-common");

    document.addEventListener("scroll", function () {

        if (window.pageYOffset >= navCommon.offsetTop) {
            goBack.style.display = "block";
        } else {
            goBack.style.display = "none";
        }
    });

    goBack.addEventListener("click", function () {
        window.scroll(0, 0);
    });
});